24 sierpnia 2025Polski

Poznaj eksperymentalny hook Reacta experimental_useFormState, usprawniający zarządzanie stanem formularzy. Uprość złożone formularze, popraw wydajność i efektywnie obsługuj asynchroniczne akcje.

React experimental_useFormState: Kompleksowy przewodnik po usprawnionej obsłudze formularzy

Ciągle ewoluujący ekosystem Reacta nieustannie wprowadza innowacyjne narzędzia, aby poprawić doświadczenie deweloperów i wydajność aplikacji. Jednym z takich usprawnień jest Hook experimental_useFormState. Ten hook, obecnie w fazie eksperymentalnej, zapewnia potężne i usprawnione podejście do zarządzania stanem formularzy i obsługi asynchronicznych akcji, szczególnie w połączeniu z komponentami i akcjami serwerowymi Reacta. Ten przewodnik zagłębi się w zawiłości experimental_useFormState, badając jego korzyści, przypadki użycia i strategie implementacji.

Czym jest `experimental_useFormState`?

Hook experimental_useFormState został zaprojektowany, aby uprościć zarządzanie formularzami w aplikacjach React. Oferuje deklaratywny sposób obsługi stanu formularza, błędów i asynchronicznych przesłań. W przeciwieństwie do tradycyjnych metod, które często wiążą się z ręcznymi aktualizacjami stanu i złożoną obsługą zdarzeń, experimental_useFormState usprawnia ten proces, dostarczając pojedynczy hook do zarządzania całym cyklem życia formularza.

W swojej istocie experimental_useFormState pozwala powiązać wartość stanu z funkcją, która wykonuje logikę przesyłania formularza. Funkcja ta, zazwyczaj akcja serwera w kontekście komponentów serwerowych Reacta, jest odpowiedzialna za walidację danych i wykonywanie niezbędnych mutacji. Hook zarządza następnie stanem wykonania tej funkcji, dostarczając użytkownikowi informacje zwrotne o statusie formularza (np. ładowanie, sukces, błąd).

Korzyści z używania `experimental_useFormState`

Uproszczona logika formularzy: Redukuje powtarzalny kod (boilerplate) poprzez scentralizowanie zarządzania stanem formularza w jednym hooku.
Poprawiona wydajność: Optymalizuje renderowanie poprzez minimalizowanie zbędnych aktualizacji i wykorzystywanie mutacji danych po stronie serwera.
Deklaratywne podejście: Promuje bardziej czytelny i łatwiejszy w utrzymaniu kod dzięki deklaratywnemu stylowi programowania.
Bezproblemowa integracja z akcjami serwera: Zaprojektowany do bezproblemowej współpracy z komponentami i akcjami serwerowymi Reacta, umożliwiając efektywne pobieranie i mutacje danych.
Ulepszone doświadczenie użytkownika: Zapewnia użytkownikowi jasne i zwięzłe informacje zwrotne dotyczące stanu formularza, poprawiając ogólne doświadczenie użytkownika.

Przypadki użycia dla `experimental_useFormState`

Hook experimental_useFormState jest szczególnie dobrze przystosowany do scenariuszy obejmujących złożone formularze, które wymagają walidacji po stronie serwera i mutacji danych. Oto kilka typowych przypadków użycia:

Formularze uwierzytelniania: Obsługa formularzy rejestracji użytkownika, logowania i resetowania hasła.
Formularze e-commerce: Przetwarzanie formularzy kasowych, aktualizacja profili użytkowników i zarządzanie listami produktów.
Systemy Zarządzania Treścią (CMS): Tworzenie i edycja artykułów, zarządzanie rolami użytkowników i konfiguracja ustawień witryny.
Platformy mediów społecznościowych: Publikowanie aktualizacji, przesyłanie komentarzy i zarządzanie profilami użytkowników.
Formularze wprowadzania danych: Gromadzenie i walidacja danych z różnych źródeł, takich jak ankiety, formularze opinii i informacje o klientach.

Przykład implementacji: Prosty formularz kontaktowy

Zilustrujmy użycie experimental_useFormState praktycznym przykładem: prostym formularzem kontaktowym. Formularz ten zbierze imię, adres e-mail i wiadomość użytkownika, a następnie prześle dane do akcji serwera w celu przetworzenia.

1. Zdefiniuj akcję serwera

Najpierw musimy zdefiniować akcję serwera, która obsługuje przesyłanie formularza. Ta akcja zweryfikuje dane i wyśle powiadomienie e-mail.

```javascript // app/actions.js 'use server'; import { revalidatePath } from 'next/cache'; import { sendEmail } from './utils/email'; // Przykład funkcji wysyłającej e-mail export async function submitContactForm(prevState, formData) { const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); // Podstawowa walidacja if (!name || !email || !message) { return 'Please fill in all fields.'; } try { await sendEmail({ to: 'admin@example.com', // Zastąp swoim adresem e-mail administratora subject: 'New Contact Form Submission', text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`, }); revalidatePath('/'); // Ponownie waliduj stronę główną lub odpowiednią ścieżkę return 'Thank you for your message!'; } catch (error) { console.error('Error sending email:', error); return 'An error occurred. Please try again later.'; } } ```

Wyjaśnienie:

Dyrektywa 'use server' wskazuje, że ta funkcja powinna być wykonana na serwerze.
Funkcja przyjmuje poprzedni stan (prevState) i dane formularza (formData) jako argumenty.
Pobiera imię, adres e-mail i wiadomość z danych formularza.
Wykonuje podstawową walidację, aby upewnić się, że wszystkie wymagane pola są wypełnione.
Używa asynchronicznej funkcji sendEmail (którą będziesz musiał zaimplementować osobno) do wysyłania powiadomień e-mail. Może to być usługa taka jak SendGrid, Mailgun lub AWS SES.
revalidatePath('/') zmusza Next.js do ponownego pobrania danych dla strony głównej, zapewniając natychmiastowe odzwierciedlenie wszelkich istotnych zmian.
Zwraca komunikat o sukcesie lub błędzie, aby zaktualizować stan formularza.

2. Zaimplementuj komponent Reacta

Teraz utwórzmy komponent Reacta, który używa experimental_useFormState do zarządzania stanem formularza i obsługi przesyłania.

```javascript 'use client'; import { experimental_useFormState as useFormState } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); return (

Name:

Email:

Message:

</div>
      <button type="submit">Submit</button>
      {state && <p>{state}</p>}
    </form>
  );
}

export default ContactForm;
```

<p><b>Wyjaśnienie:</b></p>
<ul>
  <li>Dyrektywa <code>'use client'</code> wskazuje, że ten komponent jest komponentem klienckim.</li>
  <li>Importujemy <code>experimental_useFormState</code> jako <code>useFormState</code> dla zwięzłości oraz akcję <code>submitContactForm</code>.</li>
  <li>Wywołujemy <code>useFormState</code>, przekazując akcję <code>submitContactForm</code> i początkowy stan <code>null</code>.</li>
  <li>Hook zwraca bieżący stan (<code>state</code>) i funkcję (<code>formAction</code>), która uruchamia przesłanie formularza.</li>
  <li>Dołączamy funkcję <code>formAction</code> do właściwości <code>action</code> elementu <code>form</code>. Jest to kluczowe dla prawidłowej obsługi przesyłania formularza przez React.</li>
  <li>Formularz zawiera pola wejściowe dla imienia, adresu e-mail i wiadomości, a także przycisk przesyłania.</li>
  <li>Linia <code>{state && <p>{state}</p>}</code> wyświetla użytkownikowi bieżący stan (komunikat o sukcesie lub błędzie).</li>
</ul>

<h3>3. Konfiguracja usługi wysyłania e-maili (przykład sendEmail)</h3>

<p>Będziesz musiał zaimplementować funkcję <code>sendEmail</code>. Oto przykład użycia Nodemailera z kontem Gmail (Uwaga: Bezpośrednie użycie Gmaila w środowisku produkcyjnym jest ogólnie odradzane. Użyj dedykowanej usługi e-mail, takiej jak SendGrid, Mailgun lub AWS SES, dla środowisk produkcyjnych):</p>

```javascript
// app/utils/email.js
import nodemailer from 'nodemailer';

export async function sendEmail({ to, subject, text }) {
  // Utwórz obiekt transportera używając SMTP Gmaila
  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'your_gmail_address@gmail.com', // Zastąp swoim adresem Gmail
      pass: 'your_gmail_password',       // Zastąp swoim hasłem Gmail lub hasłem aplikacji
    },
  });

// Zdefiniuj opcje e-maila
  const mailOptions = {
    from: 'your_gmail_address@gmail.com',
    to: to,
    subject: subject,
    text: text,
  };

// Wyślij e-mail
  try {
    await transporter.sendMail(mailOptions);
    console.log('Email sent successfully');
  } catch (error) {
    console.error('Error sending email:', error);
    throw error; // Ponownie rzuć błąd, aby został przechwycony w akcji serwera
  }
}
```

<p><b>Ważna uwaga dotycząca bezpieczeństwa:</b> Nigdy nie umieszczaj swojego faktycznego hasła do Gmaila bezpośrednio w kodzie! Używaj zmiennych środowiskowych do przechowywania poufnych informacji. Do użytku produkcyjnego wygeneruj hasło aplikacji specjalnie dla Nodemailera i unikaj używania głównego hasła do Gmaila. Dedykowane usługi wysyłania e-maili oferują lepszą dostarczalność i bezpieczeństwo w porównaniu do bezpośredniego używania Gmaila.</p>

<h3>4. Uruchamianie przykładu</h3>

<p>Upewnij się, że masz zainstalowane niezbędne zależności:</p>

```bash
npm install nodemailer
```

```bash
yarn add nodemailer
```

<p>Następnie uruchom serwer deweloperski Next.js:</p>

```bash
npm run dev
```

```bash
yarn dev
```

<p>Otwórz przeglądarkę i przejdź do strony zawierającej komponent <code>ContactForm</code>. Wypełnij formularz i wyślij go. Powinieneś zobaczyć komunikat o sukcesie lub komunikat o błędzie wyświetlony poniżej formularza. Sprawdź swoją skrzynkę odbiorczą, aby zweryfikować, czy e-mail został pomyślnie wysłany.</p>

<h2>Zaawansowane użycie i uwagi</h2>

<h3>1. Obsługa stanów ładowania</h3>

<p>Aby zapewnić lepsze doświadczenie użytkownika, ważne jest wskazanie, kiedy formularz jest przesyłany. Chociaż <code>experimental_useFormState</code> nie udostępnia bezpośrednio stanu ładowania, możesz zarządzać tym ręcznie, używając hooka Reacta <code>useTransition</code> w połączeniu z <code>formAction</code>.</p>

```javascript
'use client';

import { experimental_useFormState as useFormState, useTransition } from 'react';
import { submitContactForm } from './actions';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, null);
  const [isPending, startTransition] = useTransition();

const handleSubmit = async (formData) => {
    startTransition(() => {
      formAction(formData);
    });
  };

return (
    <form action={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" rows="4" required />
      </div>
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
      {state && <p>{state}</p>}
    </form>
  );
}

export default ContactForm;
```

<p>W tym przykładzie:</p>

<ul>
  <li>Importujemy <code>useTransition</code> z 'react'.</li>
  <li>Wywołujemy <code>useTransition</code>, aby uzyskać stan <code>isPending</code> i funkcję <code>startTransition</code>.</li>
  <li>Zawijamy wywołanie <code>formAction</code> w <code>startTransition</code>. Informuje to React, aby traktował przesłanie formularza jako przejście, umożliwiając jego przerwanie w razie potrzeby.</li>
  <li>Wyłączamy przycisk przesyłania, gdy <code>isPending</code> jest prawdą, i zmieniamy tekst przycisku na "Przesyłanie...".</li>
</ul>

<h3>2. Obsługa błędów i walidacja</h3>

<p>Solidna obsługa błędów jest kluczowa dla zapewnienia dobrego doświadczenia użytkownika. Akcja serwera powinna przeprowadzać dokładną walidację i zwracać informacyjne komunikaty o błędach do klienta. Komponent kliencki może następnie wyświetlać te komunikaty użytkownikowi.</p>

<p><b>Walidacja po stronie serwera:</b> Zawsze waliduj dane na serwerze, aby zapobiec złośliwemu wprowadzaniu danych i zapewnić integralność danych. Używaj bibliotek takich jak Zod lub Yup do walidacji schematu.</p>

<p><b>Walidacja po stronie klienta (opcjonalnie):</b> Chociaż walidacja po stronie serwera jest niezbędna, walidacja po stronie klienta może zapewnić użytkownikowi natychmiastową informację zwrotną i poprawić doświadczenie użytkownika. Jednak walidacja po stronie klienta nigdy nie powinna być jedynym źródłem prawdy.</p>

<h3>3. Optymistyczne aktualizacje</h3>

<p>Optymistyczne aktualizacje mogą sprawić, że Twoja aplikacja będzie bardziej responsywna, natychmiastowo aktualizując interfejs użytkownika tak, jakby przesłanie formularza zakończyło się sukcesem, jeszcze zanim serwer to potwierdzi. Bądź jednak przygotowany na obsługę błędów i cofnięcie zmian, jeśli przesłanie się nie powiedzie.</p>

<p>Dzięki <code>experimental_useFormState</code> możesz implementować optymistyczne aktualizacje, aktualizując stan lokalny w oparciu o dane formularza przed wywołaniem <code>formAction</code>. Jeśli akcja serwera zakończy się niepowodzeniem, możesz cofnąć zmiany na podstawie komunikatu o błędzie zwróconego przez hook.</p>

<h3>4. Revalidacja i buforowanie</h3>

<p>Komponenty i akcje serwerowe Reacta wykorzystują buforowanie w celu poprawy wydajności. Gdy przesłanie formularza modyfikuje dane, ważne jest ponowne walidowanie pamięci podręcznej, aby upewnić się, że interfejs użytkownika odzwierciedla najnowsze zmiany.</p>

<p>Funkcje <code>revalidatePath</code> i <code>revalidateTag</code> z <code>next/cache</code> mogą być używane do unieważniania określonych części pamięci podręcznej. W przykładzie <code>submitContactForm</code>, <code>revalidatePath('/')</code> jest używane do ponownej walidacji strony głównej po pomyślnym przesłaniu formularza.</p>

<h3>5. Internacjonalizacja (i18n)</h3>

<p>Podczas tworzenia aplikacji dla globalnej publiczności, internacjonalizacja (i18n) jest kluczowa. Obejmuje to dostosowanie aplikacji do różnych języków, regionów i preferencji kulturowych.</p>

<p>Dla formularzy oznacza to dostarczenie zlokalizowanych etykiet, komunikatów o błędach i reguł walidacji. Użyj bibliotek i18n, takich jak <code>next-intl</code> lub <code>react-i18next</code>, aby zarządzać tłumaczeniami i formatować dane zgodnie z lokalizacją użytkownika.</p>

<p>Przykład użycia <code>next-intl</code>:</p>

```javascript
// i18n.js (przykład)
import { createTranslator } from 'next-intl';

const messages = {
  en: {
    ContactForm: {
      NameLabel: 'Name',
      EmailLabel: 'Email',
      MessageLabel: 'Message',
      SubmitButton: 'Submit',
      SuccessMessage: 'Thank you for your message!',
      ErrorMessage: 'An error occurred. Please try again later.',
      NameRequired: 'Name is required',
      EmailRequired: 'Email is required',
      MessageRequired: 'Message is required',
    },
  },
  es: {
    ContactForm: {
      NameLabel: 'Nombre',
      EmailLabel: 'Correo electrónico',
      MessageLabel: 'Mensaje',
      SubmitButton: 'Enviar',
      SuccessMessage: '¡Gracias por tu mensaje!',
      ErrorMessage: 'Ocurrió un error. Inténtalo de nuevo más tarde.',
      NameRequired: 'El nombre es obligatorio',
      EmailRequired: 'El correo electrónico es obligatorio',
      MessageRequired: 'El mensaje es obligatorio',
    },
  },
  // Dodaj więcej języków w razie potrzeby
};

export async function getTranslations(locale) {
  return createTranslator({ locale, messages });
}
```

```javascript
// ContactForm.js
'use client';

import { experimental_useFormState as useFormState, useTransition } from 'react';
import { submitContactForm } from './actions';
import { useLocale, useTranslations } from 'next-intl';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, null);
  const [isPending, startTransition] = useTransition();
  const t = useTranslations('ContactForm');

const handleSubmit = async (formData) => {
    startTransition(() => {
      formAction(formData);
    });
  };

return (
    <form action={handleSubmit}>
      <div>
        <label htmlFor="name">{t('NameLabel')}:</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">{t('EmailLabel')}:</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">{t('MessageLabel')}:</label>
        <textarea id="message" name="message" rows="4" required />
      </div>
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : t('SubmitButton')}
      </button>
      {state && <p>{state === 'Thank you for your message!' ? t('SuccessMessage') : t('ErrorMessage')}</p>}
    </form>
  );
}

export default ContactForm;
```

<h3>6. Dostępność (a11y)</h3>

<p>Dostępność jest kluczowa dla zapewnienia, że Twoja aplikacja jest użyteczna dla każdego, w tym dla osób z niepełnosprawnościami. Rozważ następujące wytyczne dotyczące dostępności podczas tworzenia formularzy:</p>

<ul>
  <li><b>Używaj semantycznego HTML:</b> Używaj odpowiednich elementów HTML, takich jak <code><label></code>, <code><input></code> i <code><textarea></code>, aby nadać strukturę i znaczenie Twojemu formularzowi.</li>
  <li><b>Zapewnij etykiety dla wszystkich pól formularza:</b> Powiąż etykiety z polami formularza, używając atrybutu <code>for</code> w elemencie <code><label></code> i atrybutu <code>id</code> w polu formularza.</li>
  <li><b>Używaj atrybutów ARIA:</b> Używaj atrybutów ARIA, aby dostarczyć dodatkowe informacje o strukturze i zachowaniu formularza technologiom wspomagającym.</li>
  <li><b>Zapewnij wystarczający kontrast kolorów:</b> Użyj wystarczającego kontrastu kolorów między tekstem a tłem, aby zapewnić czytelność osobom z wadami wzroku.</li>
  <li><b>Zapewnij nawigację klawiaturą:</b> Upewnij się, że użytkownicy mogą poruszać się po formularzu za pomocą samej klawiatury.</li>
  <li><b>Testuj z technologiami wspomagającymi:</b> Testuj swój formularz z technologiami wspomagającymi, takimi jak czytniki ekranu, aby upewnić się, że jest dostępny dla osób z niepełnosprawnościami.</li>
</ul>

<h2>Globalne uwagi i najlepsze praktyki</h2>

<h3>1. Strefy czasowe</h3>

<p>Podczas obsługi dat i godzin w formularzach ważne jest, aby wziąć pod uwagę strefy czasowe. Przechowuj daty i godziny w formacie UTC na serwerze i konwertuj je na lokalną strefę czasową użytkownika po stronie klienta.</p>

<h3>2. Waluty</h3>

<p>Podczas obsługi wartości pieniężnych w formularzach ważne jest prawidłowe zarządzanie walutami. Użyj biblioteki do formatowania walut, aby formatować wartości zgodnie z lokalizacją użytkownika i wyświetlać odpowiedni symbol waluty.</p>

<h3>3. Adresy</h3>

<p>Formaty adresów znacznie różnią się w zależności od kraju. Użyj biblioteki obsługującej międzynarodowe formaty adresów, aby upewnić się, że użytkownicy mogą poprawnie wprowadzić swoje adresy.</p>

<h3>4. Numery telefonów</h3>

<p>Formaty numerów telefonów również różnią się w zależności od kraju. Użyj biblioteki do formatowania numerów telefonów, aby formatować numery zgodnie z lokalizacją użytkownika i weryfikować, czy są to prawidłowe numery telefonów.</p>

<h3>5. Prywatność danych i zgodność</h3>

<p>Pamiętaj o przepisach dotyczących prywatności danych, takich jak RODO i CCPA, podczas zbierania i przetwarzania danych z formularzy. Uzyskaj zgodę użytkowników przed zebraniem ich danych i zapewnij im możliwość dostępu, modyfikowania i usuwania swoich danych.</p>

<h2>Podsumowanie</h2>

<p>Hook <code>experimental_useFormState</code> oferuje obiecujące podejście do upraszczania zarządzania formularzami w aplikacjach React. Wykorzystując akcje serwera i przyjmując deklaratywny styl, deweloperzy mogą tworzyć bardziej wydajne, łatwe w utrzymaniu i przyjazne dla użytkownika formularze. Choć wciąż w fazie eksperymentalnej, <code>experimental_useFormState</code> ma znaczący potencjał do usprawnienia przepływu pracy z formularzami i ulepszenia ogólnego doświadczenia deweloperskiego Reacta. Postępując zgodnie z najlepszymi praktykami przedstawionymi w tym przewodniku, możesz skutecznie wykorzystać moc <code>experimental_useFormState</code> do budowania solidnych i skalowalnych rozwiązań formularzy dla swoich aplikacji.</p>

<p>Pamiętaj, aby zawsze być na bieżąco z najnowszą dokumentacją Reacta i dyskusjami społeczności, ponieważ API ewoluuje od eksperymentalnego do stabilnego.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">obsługa formularzy</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">stan formularza</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">eksperymentalne API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formularze React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">akcje serwera</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">hook React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">optymalizacja formularzy</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formularze asynchroniczne</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">mutacje danych</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">aktualizacje UI</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template><template id="P:47"></template><template id="P:48"></template><template id="P:49"></template><template id="P:4a"></template></div><link rel="alternate" hrefLang="ja" href="https://mlog.uz/ja/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="React experimental_useFormState: Kompleksowy przewodnik po usprawnionej obsłudze formularzy"/><meta property="og:description" content="Poznaj eksperymentalny hook Reacta experimental_useFormState, usprawniający zarządzanie stanem formularzy. Uprość złożone formularze, popraw wydajność i efektywnie obsługuj asynchroniczne akcje."/><meta property="og:url" content="https://mlog.uz/pl/blog/React%20experimental_useFormState%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20Handling"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="pl"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-08-24T08:44:16.721Z"/><meta property="article:modified_time" content="2025-08-24T08:44:16.721Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="React"/><meta property="article:tag" content="useFormState"/><meta property="article:tag" content="obsługa formularzy"/><meta property="article:tag" content="stan formularza"/><meta property="article:tag" content="eksperymentalne API"/><meta property="article:tag" content="formularze React"/><meta property="article:tag" content="akcje serwera"/><meta property="article:tag" content="hook React"/><meta property="article:tag" content="optymalizacja formularzy"/><meta property="article:tag" content="formularze asynchroniczne"/><meta property="article:tag" content="mutacje danych"/><meta property="article:tag" content="aktualizacje UI"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="React experimental_useFormState: Kompleksowy przewodnik po usprawnionej obsłudze formularzy"/><meta name="twitter:description" content="Poznaj eksperymentalny hook Reacta experimental_useFormState, usprawniający zarządzanie stanem formularzy. Uprość złożone formularze, popraw wydajność i efektywnie obsługuj asynchroniczne akcje."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><div hidden id="S:47"></div><script>$RS("S:47","P:47")</script><div hidden id="S:48"></div><script>$RS("S:48","P:48")</script><div hidden id="S:49"></div><script>$RS("S:49","P:49")</script><div hidden id="S:4a"></div><script>$RS("S:4a","P:4a")</script><script>$RC("B:0","S:0")</script></body></html>

React experimental_useFormState: Kompleksowy przewodnik po usprawnionej obsłudze formularzy

Czym jest experimental_useFormState?

Korzyści z używania experimental_useFormState

Przypadki użycia dla experimental_useFormState

Przykład implementacji: Prosty formularz kontaktowy

1. Zdefiniuj akcję serwera

2. Zaimplementuj komponent Reacta

Czym jest `experimental_useFormState`?

Korzyści z używania `experimental_useFormState`

Przypadki użycia dla `experimental_useFormState`